window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var circle = focus.children[1]
    var focusWidth = focus.offsetWidth;
    //1.利用定时器自动轮播图片
    var index = 0;
    var time = setInterval(function () {
        index++;
        var x = -index * focusWidth;     //图片每次移动的距离
        ul.style.transition = 'all 0.3s';    //添加过渡
        ul.style.transform = 'translateX(' + x + 'px)';
    }, 2000);
    //结束条件是transition完成之后，添加检测过渡完成事件transitionend
    ul.addEventListener('transitionend', function () {
        //图片到了最后一张就跳回第一张图片，同时取消过渡
        if (index >= 3) {         //从左到右
            //回到第一张图片
            index = 0;
            //取消过渡
            ul.style.transition = 'none';
            //让图片继续滚动
            var x = -index * focusWidth;
            ul.style.transform = 'translateX(' + x + 'px)';
        } else if (index < 0) {    //到了第一张图片，就跳转到最后一张图片
            //第三张图片的索引号
            index = ul.children.length-1;
            //取消过渡
            ul.style.transition = 'none';
            //让图片继续滚动
            var x = -index * focusWidth;
            ul.style.transform = 'translateX(' + x + 'px)';
        }
        //2.小圆点跟随变化效果
        //(1).把ol里面li带有current的类名选出来用classList.move去除
        circle.querySelector('.current').classList.remove('current');
        //(2).让当前索引号的li加上current    classList.add添加
        circle.children[index].classList.add('current');
        //(3).在过渡完成之后变化，需写到transitionend事件里面
    });
    //3.手指滑动效果
    //(1)触摸元素touchstart: 获取手指的初始位置
    var startX = 0;
    var moveX = 0;
    var flag = false;    //用来判断屏幕是否移动
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        //手指触摸屏幕就停止定时器
        clearInterval(time);
    })
    //(2)移动元素touchmove:  计算手指的滑动距离，并移动盒子
    ul.addEventListener('touchmove', function (e) {
        //手指的滑动距离
        moveX = e.targetTouches[0].pageX - startX;
        //盒子移动的距离 = 盒子的原来位置 + 手指移动的距离
        var translateX = -index * focusWidth + moveX;
        //进行移动，同时动画效果取消
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translateX + 'px)';
        flag = true;
    })
    //3.手指离开，根据移动距离去判断是回弹，还是播放下一张或上一张图片
    ul.addEventListener('touchend', function (e) {
        if (flag == true) {
            //(1).移动距离大于50，就播放上一张  或  下一张
            if (Math.abs(moveX) > 50) {
                //如果右滑(移动距离大于0)就播放上一张图片
                if (moveX > 0) {
                    index--;
                } else {
                    //如果右滑(移动距离大于0)就播放上一张图片
                    index++;
                }
                var x = -index * focusWidth;
                ul.style.transition = 'all 0.3s';    //添加过渡
                ul.style.transform = 'translateX(' + x + 'px)';
            } else {
                //(2).移动距离小于50，就回弹
                var x = -index * focusWidth;
                ul.style.transition = 'all 0.1s';    //添加过渡
                ul.style.transform = 'translateX(' + x + 'px)';
            }
        }
        //手指离开了屏幕就重新启动定时器
        clearInterval(time);
        time = setInterval(function () {
            index++;
            var x = -index * focusWidth;     //图片每次移动的距离
            ul.style.transition = 'all 0.3s';    //添加过渡
            ul.style.transform = 'translateX(' + x + 'px)';
        }, 2000);
    })
    //返回顶部模块
    var goback = document.querySelector('.goback');
    var maincontent = document.querySelector('.main-content');
    console.log(maincontent.offsetTop);
    console.log(window.pageYOffset);
    goback.addEventListener('scroll',function(){
        if(window.pageYOffset >= 40){
            goback.style.display = 'block';
        }else{
            goback.style.display = 'none';
        }
    });
    goback.addEventListener('click',function(){
        window.scroll(0,0);
    })
})